import { FC, useEffect, useState } from "react"
import Taro, { useRouter } from '@tarojs/taro'
import transport from '../../resource/transport.png'
import complete from '../../resource/complete.png'
import cancel from '../../resource/cancel.png'
import avatar from '../../resource/avatar2.png'
import phone from '../../resource/phone.png'
import { AtNoticebar } from 'taro-ui'
import style from './style.less'

const Details: FC = () => {
  const router = useRouter()
  const param = JSON.parse(router.params.param as string)
  const status = Number(router.params.status)
  console.log('订单详情', param, status);

  const [m, setM] = useState(8.8)
  const [n, setN] = useState(7.9)
  const [x, setX] = useState(58)
  const [y, setY] = useState(56)

  useEffect(() => {
    let timer = 0
    if (param.status > 2 && param.truckType === '冷藏车' && status === 1) {
      Taro.request({
        url: 'http://10.190.84.29:9527/fta-trade/order/shipper/coldMembership/getTruckData',
        method: 'POST',
        data: JSON.stringify({
          openId: Taro.getStorageSync('token'),
          orderNumber: param.orderNumber
        }),
        success: (data) => {
          console.log('获取温湿度', data);
          setM(data.data.data.currentTemperature)
          setN(data.data.data.averageTemperature)
          setX(data.data.data.currentHumidity)
          setY(data.data.data.averageHumidity)
        },
        fail: () => {
          console.log('获取温度失败');
        }
      })
      timer = window.setInterval(() => {
        Taro.request({
          url: 'http://10.190.84.29:9527/fta-trade/order/shipper/coldMembership/getTruckData',
          method: 'POST',
          data: JSON.stringify({
            openId: Taro.getStorageSync('token'),
            orderNumber: param.orderNumber
          }),
          success: (data) => {
            console.log('获取温湿度', data);
            setM(data.data.data.currentTemperature)
            setN(data.data.data.averageTemperature)
            setX(data.data.data.currentHumidity)
            setY(data.data.data.averageHumidity)
          },
          fail: () => {
            console.log('获取温度失败');
          }
        })
      }, 60000)
    }
    return clearInterval(timer)
  }, [])

  return (
    <div className={style.root}>
      <div className="status">
        <div>{status === 1 ? "运输中" : status === 2 ? "已完成" : "已取消"}</div>
        <img src={status === 1 ? transport : status === 2 ? complete : cancel} alt="" />
      </div>
      <AtNoticebar marquee speed={80} customStyle={{ color: '#f77f11', display: param.status > 2 && param.truckType === '冷藏车' && status === 1 ? 'block' : 'none' }}>
        冷藏车当前温度为：{m}°C，平均温度为：{n}°C；当前湿度为：{x}%，平均湿度为：{y}%。
      </AtNoticebar>
      <div className="title">装卸信息</div>
      <div className="address">
        <div className="zhuang">装</div>
        <div className="xie">卸</div>
        <div className="start">{param.loadAddress}<br /><i>{param.loadTime} 前装货</i></div>
        <div className="end">{param.unloadingAdress}<br /><i>{param.unloadingTime} 前卸货</i></div>
      </div>
      <div className="info">
        <div className="info-title">车货信息</div>
        <div className="info-container">
          <div>车辆</div>
          <div>{param.truckLength}米 {param.truckType}</div>
        </div>
        <div className="info-container">
          <div>货物</div>
          <div>{param.cargoName}，{param.truckWeight}吨，{param.cargoCapacipy}方，木箱</div>
        </div>
      </div>
      <div className="payment" style={{ height: Taro.pxTransform(240) }}>
        <div className="payment-title">支付信息</div>
        <div className="payment-container">
          <div>总运费</div>
          <div><i>{param.totalFreightAmount}</i> 元/趟</div>
        </div>
        <div className="payment-container">
          <div>订金</div>
          <div><i>{param.driverPayDeposit}</i> 元{param.isBackDeposit ? '（退还）' : '（不退还）'}</div>
        </div>
      </div>
      {status !== 3 ? (
        <div className="owner">
          <img src={avatar} alt="" />
          <div>{param.driverName ? param.driverName[0] : '李'}师傅</div>
          <div>交易117 | 好评率99%</div>
          <img src={phone} alt="" />
        </div>
      ) : (
        <div className="complaint">
          <div>您需要帮助吗？</div>
          <div onClick={() => { Taro.makePhoneCall({ phoneNumber: '18801586136' }) }}>致电客服</div>
        </div>
      )}
    </div>
  )
}

export default Details